<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>查询客房页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/cookie.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12  layui-form-pane">
            <div class="layui-form-item" id="x-city">
                <div class="layui-input-inline">
                    <select name="roomtype">
                        <option value="">房间类型</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                </div>
                <div class="layui-input-inline">

                    <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="roomid" placeholder="输入房号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select name="roomstatus">
                        <option value="">房间状态</option>
                        <option value="">空房</option>
                        <option value="">入住</option>
                        <option value="">维修</option>
                        <option value="">废弃</option>
                    </select>
                </div>
                <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
            </div>
        </form>
        <table class="layui-table" id="r_table" lay-filter="test">
            <!--<thead>-->
            <!--<tr>-->
            <!--<th>-->
            <!--<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i>-->
            <!--</div>-->
            <!--</th>-->
            <!--<th>房间号</th>-->
            <!--<th>类型</th>-->
            <!--<th>价格</th>-->
            <!--<th>客房电话</th>-->
            <!--<th>状态</th>-->
            <!--<th>操作</th>-->
            <!--</tr>-->
            <!--</thead>-->
            <!--<tbody id="tb">-->
            <!--<tr>-->
            <!--<td>-->
            <!--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i-->
            <!--class="layui-icon">&#xe605;</i></div>-->
            <!--</td>-->
            <!--<td>10001</td>-->
            <!--<td>单人房</td>-->
            <!--<td>300</td>-->
            <!--<td>020-8833991</td>-->
            <!--<td>空闲</td>-->
            <!--<td class="td-manage">-->
            <!--<a title="修改" href="javascript:;">-->
            <!--<i class="layui-icon">&#xe642;</i>-->
            <!--</a>-->
            <!--</td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>-->
            <!--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i-->
            <!--class="layui-icon">&#xe605;</i></div>-->
            <!--</td>-->
            <!--<td>10002</td>-->
            <!--<td>单人房</td>-->
            <!--<td>300</td>-->
            <!--<td>020-8833992</td>-->
            <!--<td>空闲</td>-->
            <!--<td class="td-manage">-->
            <!--<a title="修改" href="javascript:;">-->
            <!--<i class="layui-icon">&#xe642;</i>-->
            <!--</a>-->
            <!--</td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>-->
            <!--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i-->
            <!--class="layui-icon">&#xe605;</i></div>-->
            <!--</td>-->
            <!--<td>10003</td>-->
            <!--<td>单人房</td>-->
            <!--<td>300</td>-->
            <!--<td>020-8833993</td>-->
            <!--<td>空闲</td>-->
            <!--<td class="td-manage">-->
            <!--<a title="修改" href="javascript:;">-->
            <!--<i class="layui-icon">&#xe642;</i>-->
            <!--</a>-->
            <!--</td>-->
            <!--</tr>-->
            </tbody>
        </table>
        <div class="page">
            <div>
                <a class="prev" href="">&lt;&lt;</a>
                <a class="num" href="">1</a>
                <span class="current">2</span>
                <a class="num" href="">3</a>
                <a class="num" href="">489</a>
                <a class="next" href="">&gt;&gt;</a>
            </div>
        </div>
    </div>
</div>
<script>
    window.onload = function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });
        //获取表格中指定列的值传递给新修改弹窗
        layui.use(['layer', 'table'], function () {
            var $ = layui.jquery,
                layer = layui.layer;
            var table = layui.table;
            // var datasource;
            // //页面加载自动获取表格数据，生成表格添加到table中
            // $.get("/admin/roominfo.json", function (data, status) {
            //     //获取到数据,对象数组
            //     if (status == "success") {
            // for(var i=0;i<data.length;i++){
            //     var tr = $("<tr></tr>");
            //     $("<td><div class='layui-unselect layui-form-checkbox' lay-skin='primary'><i class='layui-icon'>&#xe605;</i></div></td>")
            //         .appendTo(tr);
            //     for (var key in data[i]){
            //         var td = $("<td></td>").text(data[i][key]);
            //         td.appendTo(tr);
            //     }
            //     $("<td class='td-manage'><a title='修改' href='javascript:;'><i class='layui-icon'>&#xe642;</i></a></td>")
            //         .appendTo(tr);
            //     tr.appendTo($("#tb"));
            // }
            //         datasource = data;
            //     }
            // });
            //渲染表格
            table.render({
                    elem: '#r_table'
                    , height: 400
                    , url: '/admin/roominfo.json' //数据接口
                    , page: true //开启分页
                    , cols: [
                        [ //表头
                            {field: 'r_num', title: '房间号', width: 200, sort: true, fixed: 'left', align: 'center'}
                            , {field: 'r_type', title: '房间类型', width: 120, align: 'center'}
                            , {field: 'r_price', title: '价格', width: 120, sort: true, align: 'center'}
                            , {field: 'r_phone', title: '电话', width: 200, align: 'center'}
                            , {field: 'r_status', title: '状态', width: 150, align: 'center'}
                            , {field: 'r_edit', title: '操作', toolbar: '#edit', width: 220, align: 'center'}
                        ]
                    ]
                    , done: function (res, curr, count) {
                        table.on('tool(test)', function (obj) {
                            //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                            console.log(obj);
                            var data = obj.data; //获得当前行数据
                            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                            //当要触发修改事件的时候，传递data数据
                            if (layEvent == "editroom") {
                                editRoom('修改', '/admin/room-edit', 500, 400, data);
                            }
                        });
                    }

                }
            );
            //注册点击事件
            // $("td").on("click", function () {
            //     editRoom('修改', '/admin/room-edit', 500, 400, this)
            // });
            function editRoom(title, url, w, h, data) {
                console.log(data);
                if (title == null || title == '') {
                    title = false;
                }
                ;
                if (url == null || url == '') {
                    url = "404.html";
                }
                ;
                if (w == null || w == '') {
                    w = ($(window).width() * 0.9);
                }
                ;
                if (h == null || h == '') {
                    h = ($(window).height() - 50);
                }
                ;
                var index = layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    success: function (layero, index) {
                        //在新窗口保留之前的值，在有值的基础上修改
                        var body = layer.getChildFrame('body', index);
                        // var tdlist = $(obj).parent().parent().children("td");
                        // body.find("#R_num").val(tdlist.eq(1).text());
                        // body.find("#R_type").val(tdlist.eq(2).text());
                        // body.find("#R_price").val(tdlist.eq(3).text());
                        // body.find("#R_phone").val(tdlist.eq(4).text());
                        // body.find("#R_status input[value=" + tdlist.eq(5).text() + "]").prop("selected", true);
                        //表格渲染后获取其中数据
                        body.find("#R_num").val(data["r_num"]);
                        body.find("#R_type").val(data["r_type"]);
                        body.find("#R_price").val(data["r_price"]);
                        body.find("#R_phone").val(data["r_phone"]);
                        body.find("#R_status input[value=" + data["r_status"] + "]").prop("selected", true);
                    },
                });
            }

        });/*end use*/



    };/*end onload*/

</script>
<script type="text/html" id="edit">
    <span class="layui-btn" href="javascript:;" lay-event="editroom">修改信息</span>
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>